// 顶部
.head{
  width: 100vw;
  height: 30px;
  line-height: 30px;
  background: skyblue;
  color: #fff;
  text-align: center;
}

// 海报背景（高斯模糊）
.bg{
  width: 100vw;
  height: 80%;
  position: fixed;
  left: 0;
  top: 10%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(10px);
}

// 乐碟
.plate{
  width: 240px;
  height: 240px;
  margin: 30px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  // 读碟器
  .tool{
    width: 80px;
    height: 80px;
    position: absolute;
    top: 10px;
    right: 25px;
    z-index: 9;
    transform: rotate(-30deg);
    &.active{
      right: 10px;
      transform: rotate(-60deg);
    }
  }
  // 海报
  .poster{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    animation: btnRotate 5s linear forwards infinite;
    animation-play-state: paused;
  }
}

// 音乐碟旋转动效
@keyframes btnRotate{
  0%{
    transform: rotate(0)
  }
  100%{
    transform: rotate(360deg)
  }
}

// 控件元素
.control-area{
  position: relative;
  margin-top: 30px;
  z-index: 9;
  width: 100%;
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: space-around;
  >img{
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    &.pre{
      border: 3px solid #000;
    }
  }
  .btn{
    width: 20px;
    height: 20px;
    border-radius: 0;
  }
}

// 歌曲信息
.music-info{
  margin: 30px 0 20px 30px;
  color:rgb(12, 111, 241);
  flex-direction: column;
}

// 进度
.progress{
  width: 100vw;
  height: max-content;
  padding: 0 5px;
  margin-top: 60px;
  color: rgb(37, 50, 243);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  >p{
    width: 60px;
    text-align: center;
  }
  .bar{
    margin: 0 5px;
    flex: 1;
    overflow: hidden;
    height: 5px;
    border-radius: 5px;
    background: #fff;
    .plan-bar{
      width: 0;
      height: 5px;
      position: relative;
      border-radius: 5px;
      background: linear-gradient(82deg, #b94bf8,blue,#000);
      .buoy{
        width: 8px;
        height: 5px;
        border-radius: 5px;
        position: absolute;
        left: 8px;
        transform: translateX(-100%);
      }
    }
  }
}
